@import '~@hi-ui/core-css/lib/index.scss';

// 默认态

$line-color-map: (
  'primary': use-color-mode('primary'),
  'secondary': use-color-mode('primary', 400),
  'default': use-color('gray', 700),
  'success': use-color-mode('success'),
  'danger': use-color-mode('danger'),
) !default;

// hover 态

$line-hover-color-map:(
  'primary': use-color-mode('primary', 400),
  'secondary': use-color-mode('primary', 300),
  'default': use-color('gray', 600),
  'success': use-color-mode('success', 400),
  'danger': use-color-mode('danger', 400),
) !default;

// active 态

$line-active-color-map: (
  'primary': use-color-mode('primary', 600),
  'secondary': use-color-mode('primary'),
  'default': use-color-static('black'),
  'success': use-color-mode('success', 600),
  'danger': use-color-mode('danger', 600),
) !default;

// 禁用态

$line-disabled-color-map: (
  'primary': use-color-mode('primary', 300),
  'secondary': use-color-mode('primary', 200),
  'default': use-color('gray', 500),
  'success': use-color-mode('success', 300),
  'danger': use-color-mode('danger', 300),
) !default;

// focus 态
$line-focus-shadow-map: (
  'primary': use-color-mode('primary', 200),
  'secondary': use-color-mode('primary', 100),
  'default': use-color('gray', 300),
  'success': use-color-mode('success', 200),
  'danger': use-color-mode('danger', 200),
) !default;

@mixin render-line-button() {
  & {
    // 尺寸
    &--appearance-line#{&}--size-sm {
      height: calc(#{use-text-lineheight('sm')} + #{1px * 2 + 1px * 2});
      padding: 1px 7px;

      &.#{$prefix}--icon-only {
        width: calc(#{use-text-lineheight('sm')} + #{1px * 2 + 1px * 2});
        padding: 1px 0;
      }
    }
    &--appearance-line#{&}--size-md {
      height: calc(#{use-text-lineheight('normal')} + #{4px * 2 + 1px * 2});
      padding: 4px 11px;

      &.#{$prefix}--icon-only {
        width: calc(#{use-text-lineheight('normal')} + #{4px * 2 + 1px * 2});
        padding: 4px 0;
      }
    }

    &--appearance-line#{&}--size-lg {
      height: calc(#{use-text-lineheight('lg')} + #{7px * 2 + 1px * 2});
      padding: 7px 15px;

      &.#{$prefix}--icon-only {
        width: calc(#{use-text-lineheight('lg')} + #{7px * 2 + 1px * 2});
        padding: 7px 0;
      }
    }

    &--appearance-line#{&}--size-xl {
      height: calc(#{use-text-lineheight('xxl')} + #{13px * 2 + 1px * 2});
      padding: 13px 60px;

      &.#{$prefix}--icon-only {
        width: calc(#{use-text-lineheight('xxl')} + #{13px * 2 + 1px * 2});
        padding: 13px 0;
      }
    }

    $color-list: ('primary', 'secondary', 'default', 'success', 'danger');

    @each $key in $color-list {
      $prefix: & !default;
      &--appearance-line#{&}--type-#{$key} {
        background-color: use-color-static('white');
        border: 1px solid map-get($line-color-map, $key);
        color: map-get($line-color-map, $key);

        &:not(.#{$prefix}--disabled):not(.#{$prefix}--loading):hover {
          color: map-get($line-hover-color-map, $key);
          border: 1px solid map-get($line-hover-color-map, $key);
        }

        &:not(.#{$prefix}--disabled):not(.#{$prefix}--loading):active {
          color: map-get($line-active-color-map, $key);
          border: 1px solid map-get($line-active-color-map, $key);
        }

        &:not(.#{$prefix}--disabled):not(.#{$prefix}--loading):focus {
          box-shadow: 0 0 0 2px map-get($line-focus-shadow-map, $key);
        }

        &.#{$prefix}--disabled {
          color: map-get($line-disabled-color-map, $key);
          border: 1px solid map-get($line-disabled-color-map, $key);
        }
      }
    }
  }
}
